<template>
  <div>
    <h3>MinValueTS组件</h3>
    <p>当前值: {{ displayValue }}</p>
    <button @click="decrement">-</button>
    <input type="number" v-model.number="inputValue" @change="updateValue" />
    <button @click="increment">+</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'MinValueTS',
  props: {
    min: {
      type: Number as PropType<number>,
      default: 0
    },
    modelValue: {
      type: Number as PropType<number>,
      default: 0
    }
  },
  data() {
    return {
      inputValue: this.modelValue
    }
  },
  computed: {
    displayValue(): number {
      return Math.max(this.min, this.inputValue)
    }
  },
  methods: {
    updateValue(): void {
      const newValue = Math.max(this.min, this.inputValue)
      this.$emit('update:modelValue', newValue)
    },
    increment(): void {
      this.inputValue++
      this.updateValue()
    },
    decrement(): void {
      this.inputValue--
      this.updateValue()
    },
    getValue(): number {
      return this.displayValue
    }
  }
})
</script>

<style scoped>
div {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input {
  width: 60px;
  margin: 0 10px;
}

button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>